import React,{useState,useEffect} from 'react'
// 可以代替声明周期
// 和业务的主逻辑关联不大的
// useEffect 拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程
/*第二个参数是一个数组 
当数组存在并有值时，如果数组中的任何值发生更改，则每次渲染后都会触发回调。
当它不存在时，每次渲染后都会触发回调。 类似于 componentDidUpdate。
当它是一个空列表时，回调只会被触发一次，类似于 componentDidMount。 */
function Myeffect() {
    // 变量和set+变量
    // 有新顺序,不允许多状态声明
    const [ count,setCount  ] = useState(0)
    const add = (params) => {
        setCount(count+1)
    }
    // 是异步的方法不会影响视图的更新
    // 默认会监控所有的信息的改变
    useEffect(() => {
        console.log('useState的方法改变就会被执行')
   })
    return (
        <div>
           <button onClick={add}> 点击添加{count} </button> 
        </div>
    )
}

export default Myeffect
